<template>
  <div>
    <h1 v-text="title" class="title"></h1>
    <div class="time">
      <div>发表时间：{{create_at | time('Y-M-D H:m:S')}}</div>
      <div>浏览量：{{visit_count}}</div>
    </div>
    <hr/>
    <div class="content" v-html="content"></div>
    <comment :comments="replies"></comment>
  </div>
</template>

<script>
import comment from '@/components/comment.vue'

export default {
  name: 'art',
  data () {
    return {
      data: null
    }
  },
  computed: {
    title () {
      return this.data ? this.data.title : ''
    },
    create_at () {
      return this.data ? this.data.create_at : 0
    },
    visit_count () {
      return this.data ? this.data.visit_count : 0
    },
    content () {
      return this.data ? this.data.content : ''
    },
    replies () {
      return this.data ? this.data.replies : ''
    }
  },
  created () {
    this.get(this.load().hide)
  },
  methods: {
    get (callback = () => {}) {
      let id = this.$route.params.id
      this.axios.get('/index/article', { params: { id: id } })
        .then(res => {
          this.data = res.data
          callback()
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            let toast = this.$createToast({
              txt: '请求超时',
              type: 'txt'
            })
            toast.show()
          }
          callback()
        })
    }
  },
  components: {
    comment
  }
}
</script>

<style lang="stylus" scoped>
.title
  padding 10px
  color #e40000
  font-weight 900
.time
  margin 10px 5px
  display flex
  font-size 13px
  justify-content space-between
.content
  line-height 1.7em
  padding 0 1em
  width 100%
  >>> img
    width 100%
  >>> p
    color #333
</style>
